<template>
  <div>
    <div class="payment-miniapp-tab tabs-box">
      <el-tabs
        v-model="activeName"
        type="border-card"
        @tab-click="tabClick"
      >
        <el-tab-pane
          v-if="buttonInfo['recharge-charge']"
          label="充值模版"
          name="recharge"
        > </el-tab-pane>
        <el-tab-pane
          v-if="buttonInfo['recharge-default']"
          label="默认模版"
          name="default"
        > </el-tab-pane>
      </el-tabs>
    </div>

    <div class="content-outer">
      <Block class="content-head">
        <BiForm>
          <BiFormItem label="模版名称">
            <template slot="content">
              <el-input
                v-model="requestData.name"
                placeholder="请输入模版名称"
              />
            </template>
          </BiFormItem>
          <BiFormItem>
            <template slot="button">
              <el-button
                :loading="loading"
                style="margin-left: 10px"
                type="primary"
                @click="clickSearch('查询')"
              >查询</el-button>
              <el-button @click="reset">重置</el-button>
            </template>
          </BiFormItem>
        </BiForm>
      </Block>
      <Block class="content-table ">
        <div
          v-if="activeName=='recharge'"
          class="action-box"
        >
          <div class="left"></div>
          <div class="right rowFlex allCenter">

            <el-button
              v-permission:payTemplate-add
              type="primary"
              @click="onAdd"
            >新增模版</el-button>
          </div>
        </div>
        <div v-if="activeName">
          <BiTable
            v-loading="loading"
            :data="templateListData"
            size="medium"
            :column="tableData"
            fixed="sticky"
            fixed-offset="50"
            :auto-scroll="false"
            :limit.sync="page_info.page_size"
          >
            <template v-slot:first_list="{row}">
              <newRechargeTemplateVue :list="row.first_list">
              </newrechargetemplatevue>
            </template>
            <template v-slot:repeat_list="{row}">
              <newRechargeTemplateVue :list="row.repeat_list">
              </newrechargetemplatevue>
            </template>
            <!-- <template v-slot:is_use="{row}">
              <el-switch
                v-model="row.is_use"
                active-color="#13ce66"
                active-value="1"
                inactive-value="0"
                @change="onSwitch(row)"
              >
              </el-switch>
            </template> -->
            <template
              v-if="activeName=='recharge'"
              v-slot:zip="{row}"
            >

              <el-popover
                placement="right"
                width="330"
                trigger="click"
              >
                <MobilePreview
                  v-if="!loading"
                  :row="row"
                ></MobilePreview>
                <el-button
                  slot="reference"
                  type="text"
                  size="medium"
                >预览</el-button>
              </el-popover>

              <el-button
                v-permission:payTemplate-edit
                type="text"
                size="medium"
                @click="onSet(row)"
              >编辑</el-button>
              <el-button
                v-permission:payTemplate-copy
                type="text"
                size="medium"
                @click="onCopyModel(row)"
              >复制</el-button>
            </template>
            <template
              v-else
              v-slot:zip="{row}"
            >

              <el-popover
                placement="right"
                width="330"
                trigger="click"
              >
                <MobilePreview
                  v-if="!loading"
                  :row="row"
                ></MobilePreview>
                <el-button
                  slot="reference"
                  type="text"
                  size="medium"
                >预览</el-button>
              </el-popover>
              <el-button
                v-permission:payTemplate-edit-default
                type="text"
                size="medium"
                @click="onSet(row)"
              >编辑</el-button>
            </template>
          </BiTable>
        </div>
        <page
          :page-info="page_info"
          @requestNextPage="requestNextPage"
        />

      </Block>
      <changeCoin
        :show.sync="showChangeCoin"
        :info="cofigInfo"
        @ok="onSubmit"
      />
      <BiDrawer
        v-model="biDrawerTemplate.visible"
        :drawer-title="biDrawerTemplate.title"
        :component="addTemplate"
        :row="biDrawerTemplate.row"
        drawer-size="800px"
        @ok="onSubmit"
      ></BiDrawer>
    </div>
  </div>
</template>
<script>
import MobilePreview from './component/MobilePreview.vue'
import BiDrawer from '@/components/BiDrawer'
// import addMerchant from './component/addMerchant.vue'
import { rechargeList, cofigInfo, templateUse } from '@/api/recharge'
import changeCoin from './component/changeCoin.vue'
// import rechargeTemplate from '@/common/component/rechargeTemplate.vue'
import addTemplate from './component/addTemplate.vue'
import page from '@/common/component/page.vue'
import newRechargeTemplateVue from '@/common/component/newRechargeTemplate.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'Pays',
  components: {
    // BiDrawer,
    // rechargeTemplate,
    newRechargeTemplateVue,
    MobilePreview,
    changeCoin,
    page
  },
  data() {
    return {
      activeName: 'recharge',
      showChangeCoin: false,
      addTemplateLayer: false,
      loading: false,
      drawer: {
        visible: false,
        title: '新增商户号',
        row: {}
      },
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      addTemplate: addTemplate,
      addMerchantDrawer: false,
      requestData: {
        name: ''
      },
      templateListData: [],
      tableDefaultColums: [
        {
          label: '模板名称',
          prop: 'name',
          width: 250
        },
        {
          label: '首充模板',
          prop: 'first_list',
          slotScope: true
        },
        {
          label: '复充模板',
          prop: 'repeat_list',
          slotScope: true
        },
        {
          label: '操作',
          prop: 'zip',
          width: 100,
          slotScope: true
        }
      ],
      tableColums: [
        {
          label: '模板名称',
          prop: 'name',
          width: 250
        },
        {
          label: '首充模板',
          prop: 'first_list',
          slotScope: true
        },
        {
          label: '复充模板',
          prop: 'repeat_list',
          slotScope: true
        },
        // {
        //   label: '默认模板',
        //   prop: 'is_use',
        //   slotScope: true,
        //   width: 100
        // },
        {
          label: '分销方',
          prop: 'distributor_name',
          width: 180
        },
        {
          label: '操作',
          prop: 'zip',
          width: 140,
          slotScope: true
        }
      ],
      tableData: [],
      cofigInfo: {
        money: '100'
      },
      biDrawerTemplate: {
        visible: false,
        row: {},
        title: '新增充值模版'
      }
    }
  },
  created() {
    this.tableData = this.tableColums
  },
  computed: {
    ...mapGetters(['buttonInfo'])
  },
  mounted() {
    console.log(this.buttonInfo)
    if (this.buttonInfo['recharge-charge']) {
      this.activeName = 'recharge'
      this.$AccessReport.report('zhangyu-recharge', [this.$store.state.user.routerItem.name, '充值档位管理', '充值模版'])
    } else if (this.buttonInfo['recharge-default']) {
      this.activeName = 'default'
      this.tableData = this.tableDefaultColums
      this.$AccessReport.report('zhangyu-order', [this.$store.state.user.routerItem.name, '充值档位管理', '默认模版'])
    } else {
      this.activeName = ''
    }
    this.rechargeInfo()
    this.clickSearch()
  },
  methods: {
    onCopyModel(row) {
      this.biDrawerTemplate = {
        visible: true,
        row: { ...row, copy: true },
        title: '复制充值模版'
      }
    },
    tabClick() {
      if (this.activeName === 'recharge') {
        this.tableData = this.tableColums
        this.$AccessReport.report('zhangyu-order', [this.$store.state.user.routerItem.name, '充值档位管理', '充值模版'])
      } else {
        this.tableData = this.tableDefaultColums
        this.$AccessReport.report('zhangyu-order', [this.$store.state.user.routerItem.name, '充值档位管理', '默认模版'])
      }
      this.page_info.page = 1
      this.clickSearch()
    },
    async onSwitch(row) {
      const res = await templateUse({
        id: row.id,
        is_use: row.is_use
      })
      if (res.status_code === 1) {
        this.$message.success(res.msg)
        this.clickSearch()
      }
    },
    onSet(row) {
      console.log(row)
      row.activeName = this.activeName
      this.biDrawerTemplate = {
        visible: true,
        row: row,
        title: '编辑充值模版'
      }
    },
    // 增加充值模板
    onAdd() {
      this.biDrawerTemplate = {
        visible: true,
        row: {
          activeName: this.activeName
        },
        title: '新增充值模版'
      }
    },
    startSearch() {
      this.page_info.page = 1
      this.clickSearch()
    },
    // 修改签到硬币
    changeCoin() {
      this.showChangeCoin = true
    },

    rechargeInfo() {
      const data = {
        // wxcf6caacf60b10b64
        mini_app_id: ''
      }
      cofigInfo(data).then((res) => {
        if (res.status_code === 1) {
          this.cofigInfo = res.data
        }
      })
    },
    submit() {},
    initData() {
      this.clickSearch()
    },
    requestNextPage(pageInfo) {
      this.page_info.page = pageInfo.page
      this.clickSearch()
    },
    clickSearch(type) {
      this.loading = true
      if (type == '查询') {
        this.page_info.page = 1
      }
      const data = {
        ...this.page_info,
        name: this.requestData.name,
        is_use: this.activeName === 'recharge' ? 0 : 1,
        mini_app_id: ''
      }
      rechargeList({ ...data }).then((res) => {
        this.loading = false
        if (res.status_code === 1) {
          this.page_info = res.data.page_info
          type ? this.$message.success(res.msg) : ''
          if (res.data.data.length > 0) {
            this.templateListData = res.data.data
            this.$forceUpdate()
          } else {
            this.templateListData = []
          }
        }
      })
    },
    reset() {
      this.$set(this, 'requestData', {
        name: '',
        merchant_id: ''
      })
    },
    add(title) {
      this.drawer.title = '新增商户号'
      this.drawer.row = {}
      this.drawer.visible = true
    },
    edit(row) {
      this.drawer.title = '编辑商户号'
      this.drawer.row = row
      this.drawer.visible = true
    },

    onSubmit(data) {
      this.rechargeInfo()
      this.clickSearch()
    }
  }
}
</script>
<style lang="scss" scoped>
.payment-miniapp-tab{
  height: 70px;
}
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
  .private_key {
    width: 120px;
    height: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}
// .content-table{
//   width: 1620px;
// }
.templateContent {
  width: 100%;
  overflow: auto;
}
.templateList {
  width: 1650px;
  min-height: 300px;
  .templateItem {
    margin-left: 20px;
  }
}
</style>
<style lang="scss">
.content-chart {
  .el-tabs__nav-wrap::after {
    background-color: transparent !important;
  }
}
.analysis-table {
  .cell {
    .el-table__expand-icon {
      vertical-align: top !important;
    }
    white-space: pre-line;
    .caret-wrapper {
      width: 10px;
    }
  }
  .el-table__body-wrapper {
    z-index: 2;
  }
  .table-pay-fans {
    font-weight: bold;
  }
  .tree-td {
    p {
      margin: 0;
    }
  }
}

.table-table {
  .ant-table-footer {
    padding: 8px;
    span {
      display: inline-block;
      width: 100px;
    }
  }
}
.pitcher-table {
  .el-table__row--level-1 {
    background: #eef5ff;
  }
  .el-table__row--level-2 {
    background: #f3fff9;
  }
}
.tabs-box .el-tabs__item.is-top.is-active {
  background-color: #eff3f9;
  border-top: 3px solid #06c021;
}
.el-tabs--border-card > .el-tabs__content {
  padding: 0 !important;
}
</style>
